<template>
  <div>

<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>权限管理</el-breadcrumb-item>
  <el-breadcrumb-item>权限列表</el-breadcrumb-item>
</el-breadcrumb>

<el-card>
 <el-table
    :data="rights"
    border
    style="width: 100%">
    <el-table-column
      type="index"
      label="#"
      width="180">
    </el-table-column>
    <el-table-column
      prop="authName"
      label="权限名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="path"
      label="路径">
    </el-table-column>
    <el-table-column
      prop="level"
      label="权限等级"
      width="180">

       <template slot-scope="scope">
         <el-tag v-if="scope.row.level==0">一级</el-tag>
        <el-tag  v-if="scope.row.level==1" type="success">二级</el-tag>
        <el-tag  v-if="scope.row.level==2" type="info">三级</el-tag>
       </template>



    </el-table-column>
  </el-table>
</el-card>


  </div>
</template>

<script>
  export default {
    data() {
      return {
        rights:[]
      }
    },
    created () {
      this.getdata();
    },
    methods: {
      getdata() {
        this.$axios.get('rights/list')
        .then(res=>{
          console.log(res.data)
          this.rights=res.data
          
        })
      }
    },
  }
</script>

<style  scoped>
.el-card{
  margin-top: 10px;
}
</style>